<script setup lang="ts">
import DishAssociationItem from '@/pages/spec/components/DishAssociationItem.vue'

function handleClickLeft() {
  uni.navigateBack()
}
function toSelectDish() {
  uni.navigateTo({
    url: '/pages/common/selectDish',
  })
}
const dishList = ref([1])
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="新建规格" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view class="box-border h-full flex-1 overflow-hidden p-[10px]" :show-scrollbar="false">
      <custom-wd-input
        custom-input-class="text-align-right"
        label="规格名称"
        placeholder="请输入"
        placeholder-class="text-align-right"
      />
      <custom-wd-input
        c-class="mt-3"
        custom-input-class="text-align-right"
        label="归属"
        placeholder="乡村基（青羊区）"
        placeholder-class="text-align-right"
      />
      <wd-cell
        v-if="dishList.length === 0"
        title="已关联菜品（0）"
        class="mt-3 rounded-lg"
        vertical
      >
        <view
          class="mt-4 h-[110px] flex flex-col items-center justify-center rounded-lg bg-[#f2f2f2]"
        >
          <wd-text text="暂未关联菜品" color="#333" size="12px" />
          <view class="mt-4">
            <wd-button
              type="text"
              class="ml-2"
              plain
              :round="false"
              custom-class="w-[100px] h-[25px]"
              size="small"
              @click="toSelectDish"
            >
              关联菜品
            </wd-button>
          </view>
        </view>
      </wd-cell>
      <template v-else>
        <view class="mt-2 flex items-center justify-between px-[10px]">
          <wd-text text="已关联菜品" color="#333" size="14px" />
          <view>
            <wd-button type="text" @click="toSelectDish">新增菜品</wd-button>
          </view>
          <!--          <wd-text text="新增菜品" color="#ff3535" size="14px" /> -->
        </view>
        <view class="mt-3">
          <dish-association-item />
        </view>
      </template>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="primary" :round="false" class="flex-1">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
